<template>
  <div class="game-account" :id="idName">
    <account-toggle :title="'比赛账户'" :parentId="idName" color1="rgba(141,34,2,0.3)" color2="#FD5400"
                    @toggleFunc="toggleFunc">
    </account-toggle>
    <div class="game-account-over">每场比赛都有独立的账户和模拟本金</div>
    <transition name="slide-fade">
      <div class="game-account-content" v-show="isShow">
        <games-list :tab="'games-join'"></games-list>
        <games-list :tab="'games-create'"></games-list>
      </div>
    </transition>
    <div class="bottom-blank" :class="{'account-close':!isShow}"></div>
  </div>
</template>

<script>
  import AccountToggle from 'components/selfaccount/AccountToggle'
  import GamesList from 'components/selfaccount/GamesList'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'

  export default {
    data () {
      return {
        idName: 'gameAccount',
        isShow: false
      }
    },
    props: {
      userCode: {
        type: String
      }
    },
    components: {
      'games-list': GamesList,
      'account-toggle': AccountToggle
    },
    methods: {
      toggleFunc(isShow){
        this.isShow = isShow
      }
    }
  }
</script>

<style scoped>
  .slide-fade-enter-active,.slide-fade-leave-active{
    transition: all 0.3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translate(0,-25%);
    opacity: 0;
  }
  .game-account {
    position: relative;
    background: #FFFFFF;
  }

  .game-account-content {
    z-index: 993;
    position: relative;
  }

  .game-account-over {
    z-index: 997;
    position: relative;
    background: #FD5400;
    padding: 27px 0 40px 21px;
    color: #FFFFFF;
    font-size: 12px;
  }

  .bottom-blank {
    width: 100%;
    height: 40px;
    background: #FD5400;
    z-index: 998;
    position: relative;
  }
  .account-close{
    margin-bottom: 4px;
  }
</style>
